<div class="manage-account-form-wrapper">
    
    <div class="account-title"><span>Address Book</span></div>
    
    <div class="success" th:if="${successMessage}" th:text="${successMessage}"></div>
    
    <p th:if="${#lists.isEmpty(customerAddresses)}" style="margin: 20px 10px;">
        You have not yet added any addresses to your account. Start by adding one below. 
    </p>
    
    <div class="form-fields" th:unless="${#lists.isEmpty(customerAddresses)}">
        Options:
        <select onchange="location.href=this.options[selectedIndex].value">
            <option>Choose an address to update...</option>
            <option th:each="customerAddress : ${customerAddresses}" th:object="${customerAddress}" th:value="@{'/account/addresses/' + *{id}}">
                <span th:text="*{!#strings.isEmpty(addressName) ? addressName + ' (' + address.addressLine1 + ')' : address.addressLine1}"></span>
            </option>
        </select>
        <span th:if="${customerAddressForm.customerAddressId}">&nbsp;&nbsp;- or -&nbsp;&nbsp;<a th:href="@{/account/addresses}" class="medium red">create a new address</a></span>
        <span th:unless="${customerAddressForm.customerAddressId}">&nbsp;&nbsp;- or -&nbsp;&nbsp;create a new address below</span>
    </div>
    
    <blc:form class="manage-account" 
        method="post" 
        th:action="@{'/account/addresses/' + ${customerAddressForm.customerAddressId != null ? customerAddressForm.customerAddressId : ''}}" 
        th:object="${customerAddressForm}">    
        <div class="form-fields">
        
            <div>
                <label for="firstName">First Name</label>
                <span class="error" th:if="${#fields.hasErrors('address.firstName')}" th:errors="*{address.firstName}"></span>
                <input type="text" class="field30 required" th:field="*{address.firstName}" th:classappend="${#fields.hasErrors('address.firstName')}? 'fieldError'" />
            </div>
            <div>
                <label for="lastName">Last Name</label>
                <span class="error" th:if="${#fields.hasErrors('address.lastName')}" th:errors="*{address.lastName}"></span>
                <input type="text" th:field="*{address.lastName}" class="required cloneable" th:classappend="${#fields.hasErrors('address.lastName')}? 'fieldError'" />
            </div>
            <div>
                <label for="phone">Phone</label>
                <span class="error" th:if="${#fields.hasErrors('address.phonePrimary.phoneNumber')}" th:errors="*{address.phonePrimary.phoneNumber}"></span>
                <input type="tel" th:field="*{address.phonePrimary.phoneNumber}" class="required cloneable" th:classappend="${#fields.hasErrors('address.phonePrimary.phoneNumber')}? 'fieldError'" />
            </div>
            <div>
                <label for="address1">Address</label>
                <span class="error" th:if="${#fields.hasErrors('address.addressLine1')}" th:errors="*{address.addressLine1}"></span>
                <input type="text" th:field="*{address.addressLine1}" class="required cloneable" th:classappend="${#fields.hasErrors('address.addressLine1')}? 'fieldError'" />
            </div>
            <div>
                <label for="address2">Address 2</label>
                <span class="error_spacer" th:if="${#fields.hasErrors('address.addressLine1')}"></span>
                <input type="text" th:field="*{address.addressLine2}" class="cloneable" />
            </div>
            <div>
                <label for="city">City</label>
                <span class="error" th:if="${#fields.hasErrors('address.city')}" th:errors="*{address.city}"></span>
                <br th:if="${#fields.hasErrors('address.city')}"/>
                <input type="text" th:field="*{address.city}" class="field25 required cloneable" th:classappend="${#fields.hasErrors('address.city')}? 'fieldError'" />
                
            </div>
            <div>
            	<span class="error" th:if="${#fields.hasErrors('address.state')}" th:errors="*{address.state}"></span>
            	<label for="state">State</label>
            	<select id="state" th:field="*{address.state}" size="1" class="required cloneable" th:classappend="${#fields.hasErrors('address.state')}? 'fieldError'">
                    <option value="">Select...</option>
                    <option th:each="state : ${states}" th:value="${state.abbreviation}" th:text="${state.abbreviation}"></option>
                </select>
            </div>
            <div>
                <label for="postal_code">Postal Code</label>
                <span class="error" th:if="${#fields.hasErrors('address.postalCode')}" th:errors="*{address.postalCode}"></span>
                <input type="text" th:field="*{address.postalCode}" class="field25 cloneable" th:classappend="${#fields.hasErrors('address.postalCode')}? 'fieldError'" />
            </div>
            
            <div>
                <label for="country">Country</label>
                <select id="country" th:field="*{address.country}" size="1"  class="required cloneable" th:classappend="${#fields.hasErrors('address.country')}? 'fieldError'">
                    <option value="">Select...</option>
                    <option th:each="country : ${countries}" th:value="${country.abbreviation}" th:text="${country.name}"></option>
                </select>
            </div>
            
            <div>
                <label>&nbsp;</label>
                <input type="checkbox" th:field="*{address.default}" class="field25" style="width:22px;" /> Make Default
            </div>                      
            <div>
                <label for="address_name">Address Name</label>
                <input type="text" th:field="*{addressName}" class="field50" />
            </div>
            
             <div>
	            <input type="submit" th:value="*{customerAddressId != null ? 'Update Address' : 'Create New Address'}" class="medium red" />
	            <input th:if="*{customerAddressId}" type="submit" name="removeAddress" value="Remove" class="small dark" />
	            <span class="error" th:if="${errorMessage}" th:text="${errorMessage}"></span>
	        </div>
            
            <div class="clearfix"></div>
        </div>
       
    </blc:form>
</div>